<template>
  <div class="header-info">
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">区域设置</el-divider>
      </div>
      <el-form-item label="区域高度">
        <el-input-number
          :min="0"
          size="small"
          v-model="optionsInfo.areaHeight"
        />
      </el-form-item>
      <el-form-item label="内边距左右">
        <el-input-number
          :min="0"
          size="small"
          v-model="optionsInfo.paddingRightLeft"
        />
      </el-form-item>
       <el-form-item label="时间显示">
          <el-switch v-model="optionsInfo.timeShown" />
      </el-form-item>
    </div> 
    <div class="list-item-setting" v-if="optionsInfo.timeShown">
      <div class="title-info">
        <el-divider content-position="left">时间设置</el-divider>
      </div>
     <el-form-item label="时间背景色">
        <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo.timeBackgroundColor"
        />
      </el-form-item>
      <el-form-item label="时间字体颜色">
        <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo.timeFontColor"
        />
      </el-form-item>
      <el-form-item label="时间字体大小">
        <el-input-number v-model="optionsInfo.timeFontSize" />
      </el-form-item>
      <el-form-item label="时间字体粗细">
        <el-select v-model="optionsInfo.timeFontWeight" placeholder="请选择">
          <el-option v-for="item in fontWeightOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="时间字体圆角">
        <el-input-number v-model="optionsInfo.timeBorderRadius" />
      </el-form-item>
      <el-form-item label="时间宽度">
        <el-input-number v-model="optionsInfo.timeWidth" />
      </el-form-item>
      <el-form-item label="时间高度">
        <el-input-number v-model="optionsInfo.timeHeight" />
      </el-form-item>
    </div>
    <div class="list-item-setting" v-if="true">
      <div class="title-info">
        <el-divider content-position="left">注意事项</el-divider>
      </div>
      <el-form-item label="字体颜色">
        <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo.wxTipFontColor"
        />
      </el-form-item>
      <el-form-item label="字体大小">
        <el-input-number v-model="optionsInfo.wxTipFontSize" />
      </el-form-item>
      <el-form-item label="字体粗细">
        <el-select v-model="optionsInfo.wxTipFontWeight" placeholder="请选择">
          <el-option v-for="item in fontWeightOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="字体颜色">
        <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo.wxTipFontColor"
        />
      </el-form-item>
     <el-form-item label="底部文本">
        <el-input type="textarea" v-model="optionsInfo.wxTip" />
      </el-form-item>
      <el-form-item label="滚动速度">
        <el-input-number :min="10" :max="50" v-model="optionsInfo.speed" />
      </el-form-item>
    </div>

    <!--选择图片的弹层-->
    <SelectPicture
      :info="PictureInfo.info"
      :visible="PictureInfo.visible"
      @handleSure="handleSure"
      @handleCancel="handleCancel"
    />
      <!--更新文本内容-->
    <updateFormEditor
      :visible="formEditorInfo.visible"
      :info="formEditorInfo.info"
      @handleCancel="handleCancelEditor"
      @handleSure="handleSureEditor"
    />
  </div>
</template>

<script>
import Draggable from "vuedraggable";
import SelectPicture from "@c/public/layer/template/selectPicture/index.vue";
import constantDic from "@/utils/vue-i18n/lang/zh-CN";
import updatePicture from "@c/public/layer/template/updatePicture/index.vue";
import updateFormEditor from "@c/public/layer/template/updateFormEditor/index.vue";
import carouselEditor from "@sc/templateDetails/modules/homeRight/property-editor/module/scene-edit/basicInfo/carousel-editor.vue";
import * as types from "@c/public/form-designer/devType/datas-types";

export default {
  name: "nxCommonWxConfig-editor",

  componentName: "nxCommonWxConfig-editor",

  mixins: [],

  components: {
    carouselEditor,
    SelectPicture,
    Draggable,
    updatePicture,
    updateFormEditor
  },

  props: {
    designer: Object,
    optionModel: Object,
    selectedWidget: Object,
  },

  inject: ["serverFieldList", "getDesignerConfig"],

  data() {
    return {
      radio: 1,
      screenType: "",
      optionsInfo: Object(),
      constantDic: constantDic,
      formEditorInfo: {
        info: "",
        visible: false,
      },
      PictureInfo: {
        visible: false,
        info: 1,
      },
      updateImg: "",
      predefineColors: types["predefineColors"],
      roomNameOptions: [
        {
          value: 'roomName',
          label: '诊室名称'
        },
        {
          value: 'roomShortName',
          label: '诊室简称'
        },
        {
          value: 'roomNo',
          label: '诊室号'
        },
      ],
      fontWeightOptions: types["fontWeightOptions"],
    };
  },

  methods: {
    // 选择图片
    handleSelect(value) {
      let info = Object();
      this.updateImg = "Logo";
      let { logoUrl } = this.optionsInfo;
      Reflect.set(info, "content", logoUrl);
      Reflect.set(info, "type", 1);
      Reflect.set(this.PictureInfo, "visible", true);
      Reflect.set(this.PictureInfo, "info", info);
    },

    // 取消弹层
    handleCancel() {
      Reflect.set(this.PictureInfo, "visible", false);
    },

    // 更新就的数据
    handleSure(valInfo) {
      const self = this;
      let { key, val } = valInfo;
      if (key === "content") {
        Reflect.set(self.optionsInfo, key, val);
      } else {
        const updatedArray = self.$lodash.map(val, function (object) {
          return self.$lodash.assign({}, object, { delay: 5 });
        });
        let preInfo = self.optionsInfo[key];
        // let info = [...preInfo, ...updatedArray];
        let info = [...updatedArray];
        Reflect.set(self.optionsInfo, key, []);
        Reflect.set(self.optionsInfo, key, info);
      }
    },
    // 取消弹层
    handleCancel() {
      Reflect.set(this.PictureInfo, "visible", false);
    },
    // 删除logo
    handleDeletePicture(value) {
      this.optionsInfo.logoUrl = null;
    },

    // 替换LOGO
    handleSure(val) {
      if (this.$lodash.isEmpty(val)) return;
      switch (this.updateImg) {
        case "qrCode1":
          console.log(this.optionsInfo, val);
          Reflect.set(this.optionsInfo, "qrcodeUrl1", val.url);
          break;
        case "qrCode2":
          Reflect.set(this.optionsInfo, "qrcodeUrl2", val.url);
          break;
        default:
          Reflect.set(this.optionsInfo, "logoUrl", val);
      }
    },
    handleAddContent() {
      if (this.optionsInfo.content.length >= 4) {
        this.$message.warning("最多只能添加4行");
        return;
      }
      this.optionsInfo.content.push({
        text: "",
        fontSize: 200,
        lineHeight: 280,
        fontColor: "#ffffff",
        fontWeight: 500,
        textAlign: "center",
      });
    },
    handleDeleteText(index) {
      this.optionsInfo.content.splice(index, 1);
    },
    // 选择文本内容&视频
    handleSelectEditor(val, content) {
      let params = Object();
      switch (val) {
        case "formEditorInfo":
          Reflect.set(params, "updataType", "formEditorInfo");
          Reflect.set(params, "content", content || "");
          Reflect.set(this.formEditorInfo, "visible", true);
          Reflect.set(this.formEditorInfo, "info", params);
          break;
      }
    },
    handleSureEditor(val) {
      console.log(val, "val");
      Reflect.set(this.optionsInfo, "tipText", val.val);
    },
    handleCancelEditor() {
      Reflect.set(this.formEditorInfo, "visible", false);
    },
    // 删除上传的资源
    handleDelete(index, type) {
      let { carouselInfo, video } = this.optionsInfo;
      switch (type) {
        case "carouselInfo":
          carouselInfo.splice(index, 1);
          break;
        case "video":
          video.splice(index, 1);
          break;
      }
    },
  },

  watch: {
    // 组件的所有信息
    optionModel: {
      handler: function (val) {
        this.optionsInfo = val[val.config];
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>


<style lang="scss" scoped>
.picture-wrap {
  margin: 10px 0 20px 0;
  position: relative;
  overflow: hidden;

  img {
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
  }

  .icon-wrap {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    align-self: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    border-radius: 0 0 100px 0;

    .icon-delete {
      font-weight: bold;
      color: rgba(255, 255, 255, 0.8);
    }
  }

  .el-upload {
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    width: 108px;
    height: 108px;
    cursor: pointer;
    line-height: 116px;
    vertical-align: top;

    &:hover {
      border-color: #409eff;
      color: #409eff;
    }

    .el-icon-plus {
      font-size: 1.25rem;
      color: rgba(0, 0, 0, 0.45);
    }
  }
}
.last-handle {
  display: flex;
  align-items: center;
  .el-color-picker {
    margin-right: 10px;
  }
}
</style>